function OneRubik(obj,layer) {
  // console.log('version 0.1.2.2');
  this.layer=layer;
  this.obj=obj;
  let width=56;
  let border=2;
  this.keys=this.keysArr[layer];
  let layerWayArr=['second','third','four','five'];
  this.layerWay=this[layerWayArr[layer-2]];
  this.options={
    widthMin:width+'px',
    border:border+'px solid #b0b0b0',
    heightMax:border*2+width+'px',
    widthMax:(border*2+width)*layer+'px'
  };
  this.xyBoxArr=[];
  this.draw();
}
OneRubik.prototype={
  canDo:true,
  canCount:0,
  overCount:0,
  arrDeg:[
    [0,0,0],[0,0,-180],
    [0,90,0],[180,90,0],
    [0,-90,0],[180,-90,0],
    [180,0,0],[180,0,-180]
  ],//8个方向应有的旋转角度
  //先统一角度-》动画
  //省去z处理的前置处理
  //z处理，前置处理角度-》动画-》统一角度！
  //2-5可以移至4-7，增加判断，是否执行
  zQArrDeg:[
    [0,0,0],[0,0,-180],//0,1
    [90,-270,270],//2:y+-,
      [90,90,90],
      [-90,-90,-90],
      [-90,-90,-270],
    [180,0,0],[180,0,-180]//6,7
  ],
  top:[
    ['x',180,6],//0
    ['x',180,7],//1
    ['x',180,3],//2
    ['x',180,2],//3

    ['x',180,5],//4
    ['x',180,4],//5
    ['x',180,0],
    ['x',180,1],
  ],
  bottom:[
    ['x',-180,6],//0
    ['x',-180,7],//1
    ['x',-180,3],//2
    ['x',-180,2],//3

    ['x',-180,5],//4
    ['x',-180,4],//5
    ['x',-180,0],
    ['x',-180,1],
  ],
  left:[
    ['y',-90,4],//0
    ['y',-90,5],
    ['y',-90,0],//2
    ['y',90,1],//3

    ['y',-90,7],
    ['y',90,6],
    ['y',90,3],
    ['y',90,2],
  ],
  right:[
    ['y',90,2],//0
    ['y',90,3],
    ['y',90,7],//2
    ['y',-90,6],//3

    ['y',90,0],
    ['y',-90,1],
    ['y',-90,5],
    ['y',-90,4],
  ],
  zTop:[
    ['z',-180,1],//0
    ['z',-180,0],//1
    ['y',-180,5],//2
    ['y',-180,4],//3

    ['y',180,3],//4
    ['y',180,2],//5
    ['z',180,7],
    ['z',180,6],
  ],
  zBottom:[
    ['z',180,1],//0
    ['z',180,0],//1
    ['y',180,5],//2
    ['y',180,4],//3

    ['y',-180,3],//4
    ['y',-180,2],//5
    ['z',-180,7],
    ['z',-180,6],
  ],
  values:{
    a:{
      // rgba(255,255,255,.2)  #fff
      color:'rgba(255,255,255,.92)',tx:0,ty:0,tz:30,
      rx:0,ry:0
    },
    b:{
      // rgba(255,39,55,.2)  #ff2737
      color:'rgba(255,39,55,.92)',tx:0,ty:30,tz:0,
      rx:-90,ry:0
    },
    c:{
      //rgba(255,255,0,.2)  yellow
      color:'rgba(255,255,0,.92)',tx:0,ty:0,tz:-30,
      rx:-180,ry:0
    },
    d:{
      //rgba(255,161,9,.2) #ffa109
      color:'rgba(255,161,9,.92)',tx:0,ty:-30,tz:0,
      rx:90,ry:0
    },
    e:{
      //rgba(73,218,118,.2)   color:'#49da76'
      color:'rgba(73,218,118,.92)',tx:-30,ty:0,tz:0,
      ry:-90,rx:0
    },
    f:{
      //rgba(73,89,194,.2)    color:'#4959c2'
      color:'rgba(73,89,194,.92)',tx:30,ty:0,tz:0,
      ry:90,rx:0
    }
  },
  keysArr:{
    2:[
      [[0,1,3,2],'left'],//左
      [[0,2,3,1],'right'],//右
      [[0,2],'top'],
      [[1,3],'top'],
      [[2,0],'bottom'],//1下
      [[3,1],'bottom'],//2下
      [[0,1],'zTop'],
      [[2,3],'zTop'],
      [[1,0],'zBottom'],
      [[3,2],'zBottom']
    ],
    3:[
      [[0,1,2,5,8,7,6,3,4],'right'],
      [[0,3,6,7,8,5,2,1,4],'left'],
      [[0,3,6],'top'],
      [[1,4,7],'top'],
      [[2,5,8],'top'],

      [[6,3,0],'bottom'],
      [[7,4,1],'bottom'],
      [[8,5,2],'bottom'],


      [[2,1,0],'zTop'],
      [[5,4,3],'zTop'],
      [[8,7,6],'zTop'],

      [[0,1,2],'zBottom'],
      [[3,4,5],'zBottom'],
      [[6,7,8],'zBottom'],

    ]
  },
  draw(){
    this.xzqk=[];//每个块当前方向，8个方向，初始全为0
    this.timeO=[];
    this.allXYZ=[];//记录每个方块当前位置,实时角度，初始全为0
    this.allAway=[];//记录每个方块当前所在位置序号，供选择器选择，从0至7

    //视图绘制
    let TOS=this.obj.style;//视觉窗口
    TOS.width=this.options.widthMax;
    TOS.height=this.options.heightMax;
    TOS.perspective='1500px';
    TOS.position='relative';
    TOS.margin='150px auto 160px';

    let rubik=this.creBlock();//整体转动
    this.rubikBox=rubik;
    let tz=(this.layer-1)*30;
    let i=0;
    for(let x=0;x<this.layer;x++){
      let tx=0;
      for(let y=0;y<this.layer;y++){

        this.allAway.push(i);
        this.timeO.push({});
        this.allXYZ.push({x:0,y:0,z:0});
        this.xzqk.push(0);

        let block=this.creBlock();//转动块
        let color=this.creColNew(tx,tz);//色块

        for(let g in this.values){
          let spans=this.setCol(g);//贴图
          // spans.innerHTML=i+'';
          // console.log(i);
          color.appendChild(spans);
        }
        this.xyBoxArr.push(block);
        block.appendChild(color);
        rubik.appendChild(block);
        i+=1;
        tx+=60;
      }
      tz-=60;
    }
    this.obj.appendChild(rubik);
  },
  creBlock(){
    let a=document.createElement('div');
    let as=a.style;
    as.width=this.options.widthMax;
    as.height=this.options.heightMax;
    as.position='absolute';
    as.transformStyle='preserve-3d';
   as.transform=`rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;
    return a;
  },
  creColNew(x,z){
    let a=document.createElement('div');
    let as=a.style;
    as.width=this.offsetWh;
    as.height=this.offsetWh;
    as.position='absolute';
    as.transformStyle='preserve-3d';
    as.transform=`translateX(${x}px) translateY(0px) translateZ(${z}px)`;
    return a;
  },
  setCol(y){
    let a=document.createElement('div');
    let as=a.style;
    as.width=as.height=this.options.widthMin;
    as.position='absolute';
    as.border=this.options.border;
    as.backgroundColor=this.values[y].color;
    as.transform=`translateX(${this.values[y].tx}px) translateY(${this.values[y].ty}px) translateZ(${this.values[y].tz}px)
                  rotateX(${this.values[y].rx}deg) rotateY(${this.values[y].ry}deg)`;
    return a
  },
  testStart(){
    let vm=this;
    setInterval(function () {
      vm.startMove([0,2],'top');
    },10);
  },
  startMove(keys){
    if(!this.canDo){
      return;
    }
    this.canDo=false;
    this.canCount=keys[0].length;
    this.layerWay(keys[0],keys[1]);
  },
  second(obj,howDo){//obj->选择器【allAway】中选obj[0]
    let a=this.allAway[obj[0]];
    for(let i in obj){
      this.TBLRZTB(this.allAway[obj[i]],howDo);
      if(parseInt(i)!==obj.length-1){
        this.changeAway(obj[parseInt(i)],this.allAway[obj[parseInt(i)+1]]);
      }else{
        this.changeAway(obj[obj.length-1],a);
      }
    }
  },
  third(obj,howDo){
    let a=this.allAway[obj[0]];
    let b=this.allAway[obj[1]];
    for(let i in obj){
      this.TBLRZTB(this.allAway[obj[i]],howDo);
      if(obj.length<9){
        if(parseInt(i)===0){
          this.changeAway(obj[0],this.allAway[obj[2]]);
        }else if(parseInt(i)===1){
          this.changeAway(obj[1],this.allAway[obj[1]]);
        }else{
          this.changeAway(obj[2],a);
        }
      }else{
        if(parseInt(i)<6){
          this.changeAway(obj[parseInt(i)],this.allAway[obj[parseInt(i)+2]]);
        }else if(parseInt(i)===6){
          this.changeAway(obj[6],a);
        }else if(parseInt(i)===7){
          this.changeAway(obj[7],b);
        }else if(parseInt(i)===8){
          this.changeAway(obj[8],this.allAway[obj[8]]);
        }
      }
    }
  },
  changeAway(a,b){
    this.allAway[a]=b
  },
  TBLRZTB(num,howDo){//num->从每个角块选
    let a=this[howDo][this.xzqk[num]];
    if(howDo==='zTop'||howDo==='zBottom'){
      this.allXYZ[num].x=this.zQArrDeg[this.xzqk[num]][0];
      this.allXYZ[num].y=this.zQArrDeg[this.xzqk[num]][1];
      this.allXYZ[num].z=this.zQArrDeg[this.xzqk[num]][2];
    }
    this.setTsf(a[0],a[1],a[2],num);
  },
  setTsf(moveWay,value,num,index){
    let vm=this;
    let arrS=this.xyBoxArr;
    let speed=value/18;
    let a=0;
    vm.timeO[index].timer=setInterval(function () {
      vm.allXYZ[index][moveWay]+=speed;
      vm.moveTsf(arrS[index],index);
      a+=1;
      if(a>17){
        clearInterval(vm.timeO[index].timer)
        vm.setTsfa(num,index)
      }
    },16)
  },
  setTsfa(num,index) {
    this.xzqk[index]=num;
    this.allXYZ[index].x=this.arrDeg[num][0];
    this.allXYZ[index].y=this.arrDeg[num][1];
    this.allXYZ[index].z=this.arrDeg[num][2];
    this.moveTsf(this.xyBoxArr[index],index)
    this.overCount+=1;
    if(this.canCount===this.overCount){
      this.canDo=true;
      this.overCount=0;
    }
  },
  moveTsf(obj,index){
    obj.style.transform=`rotateX(${this.allXYZ[index].x}deg)
                         rotateY(${this.allXYZ[index].y}deg)
                         rotateZ(${this.allXYZ[index].z}deg)`;
  }
};
export default OneRubik